<template>
  <a-spin :spinning="confirmLoading">
    <j-form-container :disabled="formDisabled">
      <a-form-model ref="form" :model="model" :rules="validatorRules" slot="detail">
          <a-form-model-item  v-if="batchType == 'batch'" :labelCol="labelCol" :wrapperCol="wrapperCol"  label="所属人" prop="owner">
            <a-auto-complete
                v-model="model.owner" 
                :data-source="searchOptions"
                placeholder="请选择所属人"
                :filter-option="filterOption"
                @search="(v)=>onSearch(v,'SSR')"
                @select="(val)=>onSelect(val,'SSR')"
                :open="chooseTypeSSR"
            />
          </a-form-model-item>
          <a-form-model-item :labelCol="labelCol" :wrapperCol="wrapperCol"  label="使用人" prop="userer">
            <!-- 没有search事件 -->
            <!-- <j-search-select-tag 
              placeholder="请选择使用人" 
              v-model="model.userer" 
              :dictOptions="searchOptions"
              @change="(v)=>handleChoose(v,model)"
            >
            </j-search-select-tag> -->

            <a-auto-complete
                v-model="model.userer" 
                :data-source="searchOptions"
                placeholder="请选择使用人"
                :filter-option="filterOption"
                @search="(v)=>onSearch(v,'SYR')"
                @select="(val)=>onSelect(val,'SYR')"
                :open="chooseTypeSYR"
            />
          </a-form-model-item>
          
      </a-form-model>
    </j-form-container>
  </a-spin>
</template>

<script>
import { httpAction, getAction, postAction } from '@/api/manage'
import { validateDuplicateValue } from '@/utils/util'
import { mapActions, mapGetters, mapState } from 'vuex'

export default {
  name: 'AssetPersonForm',

  props: {
    //表单禁用
    disabled: {
      type: Boolean,
      default: false,
      required: false
    }
  },
  data() {
    return {
        batchType:'',
        chooseTypeSSR:false,
        chooseTypeSYR:false,
        batchDatas:[],
        searchOptions:[],
        selectName:"",
        selectOwnerName:"",
        selectDeptId:"",
        model:{
         },
         labelCol: {
          xs: { span: 24 },
          sm: { span: 5 },
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 16 },
        },
        confirmLoading: false,
        validatorRules:{
          owner: [{ required: true, message: '请选择所属人!' }],
          userer: [{ required: true, message: '请选择使用人!' }],
        },
        url: {
          add: "/test/ceshiNote/add",
          edit: "/assets/assetsItem/edit",
          editBatch: "/assets/assetsItem/editBatch",
          queryById: "/test/ceshiNote/queryById",
          queryListByDepartId: "/sys/user/queryListByDepartId",
        }
      }
  },
  computed: {
    formDisabled() {
      return this.disabled
    },
  },
  created() {
   //备份model原始值
   this.modelDefault = JSON.parse(JSON.stringify(this.model));
   
  },
  
  methods: {
      getSlectList(value,type){
        const that = this
        let formData = {
          // deptId: data.dept,// 使用人无此参数
          pageSize: 200,
          lastname:value,
          queryType:type == 'SYR'?1:2,
          deptId:type == 'SSR'?this.batchDatas[0].departmentId:''
        }
        getAction(this.url.queryListByDepartId,formData).then((res) => {
          console.log(res)
          if(res.success){
            this.searchOptions = res.result.records.map(item=>({
                  // ...item,
                  id:item.id,
                  text:item.lastname+"-"+item.departmentname,
                  value:item.lastname
            }))
          }
        }).finally(() => {
          that.confirmLoading = false;
        })
      },
      add () {
        this.edit(this.modelDefault);
      },
      edit (record,batchDatas,batchType) {
        if(batchType == 'batch'){
          this.batchDatas = batchDatas
          this.batchType = batchType
        }else{
          this.model = Object.assign({}, record);
          this.model.userer = this.model.userer
          this.batchDatas = []
        }
        this.visible = true;
      },
      submitForm () {
        if(this.batchType == 'batch'){
          this.handleUserOwner()
        }else{
          this.handleUser()
        }
      },
      // 批量更改所属人/使用人
      handleUserOwner(){
         const that = this;
         // 触发表单验证
         this.$refs.form.validate(valid => {
          if (valid) {
            that.confirmLoading = true;
            const httpurl = this.url.editBatch
            const params = this.batchDatas.map(item=>{
              return{
                ...item,
                owner:this.selectOwnerName,
                userer:this.selectName
              }
            })
            console.log('params')
            console.log(params)
           
            httpAction(httpurl,params,'put').then((res)=>{
              if(res.success){
                that.$message.success(res.message);
                that.$emit('ok');
              }else{
                that.$message.warning(res.message);
              }
            }).finally(() => {
              that.confirmLoading = false;
            })
          }
        })
      },

      // 只更改使用人
      handleUser(){
        const that = this;
        // 触发表单验证
        this.$refs.form.validate(valid => {
          if (valid) {
            that.confirmLoading = true;
            const httpurl = this.url.edit
            const params = {
              // assetsUserId:this.selectDeptId?this.selectDeptId:this.model.assetsUserId,
              userer:this.selectName?this.selectName:this.model.assetsUserName,
              departmentId:this.model.dept,
              id:this.model.id,
              updateType:1,
              owner:this.model.owner,
              assetCoding:this.model.assetCoding,
              company:this.model.company

            }
            httpAction(httpurl,params,'put').then((res)=>{
              if(res.success){
                that.$message.success(res.message);
                that.$emit('ok');
              }else{
                that.$message.warning(res.message);
              }
            }).finally(() => {
              that.confirmLoading = false;
            })
          }
         
        })
      },
      handleChoose(v,model){
        this.selectName = v
        this.selectDeptId = this.searchOptions.filter(a => a.lastname == v)[0].id
      },
      // 下拉搜索使用人
      filterOption(input, option) {
        return (
            option.componentOptions.children[0].text.toLocaleLowerCase().indexOf(input.toLocaleLowerCase()) >= 0
        )
      },
      onSelect(v, type){
        if(type == 'SSR'){
          this.selectOwnerName = v
          this.chooseTypeSSR = false
        }else if(type == 'SYR'){
          this.selectName = v
          this.selectDeptId = this.searchOptions.filter(a => a.value == v)[0].id
          this.chooseTypeSYR = false
        }
        console.log(v, type)
      },

      onSearch(value,type){
        this.chooseType = type
        if(value.length>=1){
          this.getSlectList(value,type)
        }
        this.chooseTypeSSR = type === 'SSR';
        this.chooseTypeSYR = type === 'SYR';
        
      },
    }
  }
</script>
